<template>
  <div>
    <x-course-list
      :list="list" :total="total" :loading="isLoading" pagination
      :current-page.sync="searchForm.currentPage" :page-size.sync="searchForm.pageSize" 
      class="mt20" @change="getList">
      <template #nav>
        <el-breadcrumb separator="/" class="course-list-breadcrumb">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ courseTypeMap[$route.params.type] }}</el-breadcrumb-item>
        </el-breadcrumb>
      </template>
      <template #header>
        <div class="flex-l-c">
          <x-sort-item label="学习人数" v-model="searchForm.learningCountOrder" @change="getList"></x-sort-item>
          <x-sort-item class="ml20" label="评论数" v-model="searchForm.commentCountOrder" @change="getList"></x-sort-item>
          <x-sort-item class="ml20" label="添加时间" v-model="searchForm.createOrder" @change="getList"></x-sort-item>
        </div>
        <div class="search-list-total-result">共找到 <span>{{ total }}</span> 个结果</div>
      </template>
    </x-course-list>
  </div>
</template>

<script>
export default {
  name: 'courseList',
  data() {
    return {
      searchForm: {
        currentPage: 1,
        pageSize: 9,
      },
      list: [],
      total: 0,
      courseTypeMap: {
        ZCJD: "政策解读", HYZS: "行业知识", JNPX: "技能培训", RWSK: "人文社科",
        TZLC: "投资理财", YDJK: "运动健康", SHBK: "生活百科", OTHE:  "其它课程",
      },
      isLoading: false,
    };
  },
  methods: {
    async getList (page) {
      this.isLoading = true
      if (page === 1) {
        delete this.searchForm.learningCountOrder
        delete this.searchForm.commentCountOrder
        delete this.searchForm.createOrder
        this.searchForm.currentPage = 1;
      };
      this.searchForm.courseType = this.$route.params.type;
      const { data, total } = await this.Request.getCourseInfoPage({ params: this.searchForm })
      this.list = data;
      this.total = total;
      this.isLoading = false;
      document.querySelector('.main-container').scrollIntoView({ behavior: "smooth" });
    },
  },
  watch: {
    '$route.params': {
      handler(newValue, oldValue) {
        this.getList(1)
      },
      deep: true
    }
  },
  mounted() {
    this.getList(1)
  }
};
</script>

<style lang="scss" scoped>
@import "@/css/variable.scss";
.search-list-total-result {
  color: $white5;
  span {
    color: $blue6;
  }
}
</style>
